<template>
	<view class="content" style="padding-bottom: 150rpx;">
		<!-- tab栏 -->
		<u-swiper :list="shopInfo.topimages_arr" radius="0" height="250" circular></u-swiper>
		<view class="ffffff">
			<view class="flexbetween mainpadding">
				<image class="shopImgLogo margin_right2" :src="shopInfo.logoimage_text" mode=""></image>
				<view class="shopName">{{shopInfo.name}}</view>
			</view>
			<u-tabs :list="tabList" @click="tabchange" :scrollable="false" lineWidth="60rpx" lineColor="rgba(255, 184, 0, 1)" :activeStyle="{
			  color: '#000000',
			  fontWeight: 800,
			  transform: 'scale(1.05)'}" :inactiveStyle="{
			  color: '#666666',
			    transform: 'scale(1)'
			}"></u-tabs>
		</view>
		<view class="mainpadding">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;" ></view>
			</view>
			<view class="margin_bottom3" v-if="tabsid==0">
				<view class="margin_top shadow couponBox flexleft" v-for="item in list.data" :key="item.id" v-if="item.is_you==0">
					<view class="text radius flexcolumn" style="background-color: #ed4d2d;height: 160rpx;width: 150rpx;padding: 10rpx;">
						<view>
							<text class="xiaobai">$</text>
							<text class="xiaobai" style="font-size: 46rpx;">{{item.dk_money}}</text>
						</view>
						<view class="xiaobai text_b margin_top2">滿{{item.di_money}}可用</view>
					</view>
					<!-- <view class="line margin_right4"></view> -->
					<view class="flex1 flexcolumn ffffff" style="width: 100%;height: 100%;border-radius: 0 10rpx 10rpx 0;align-items: flex-start;">
						<view class="flexbetween padding_left3" style="width: 100%;">
							<view class="color_ling text_weight" style="margin-bottom: 35rpx;">{{item.name}}</view>
							<!-- <view class="use margin_right2" @click="lingqu(0,item.id)">領取</view> -->
						</view>
						<view class="xiaohei text_b padding_left3 margin_top2" style="font-size: 22rpx;">領取截止日 {{http.returnDate(item.get_endtime*1000)}} 使用截至日{{http.returnDate(item.endtime*1000)}}</view>
					</view>
				</view>
			</view>
			<view class="margin_bottom3" v-if="tabsid==1">
				<view class="margin_top couponBox flexleft" v-for="item in list.data" :key="item.id" v-if="item.is_you==0">
					<view class="text radius flexcolumn" style="background-color: #ed4d2d;height: 160rpx;width: 150rpx;padding: 10rpx;">
						<view>
							<text class="xiaobai">$</text>
							<text class="xiaobai" style="font-size: 46rpx;">{{item.dk_money}}</text>
						</view>
						<view class="xiaobai text_b margin_top2">滿{{item.di_money}}可用</view>
					</view>
					<!-- <view class="line margin_right4"></view> -->
					<view class="flex1 flexcolumn ffffff" style="width: 100%;height: 100%;border-radius: 0 10rpx 10rpx 0;align-items: flex-start;">
						<view class="flexbetween padding_left3" style="width: 100%;">
							<view class="color_ling text_weight" style="margin-bottom: 35rpx;">{{item.name}}</view>
							<!-- <view class="use margin_right2" @click="lingqu(1,item.id)">領取</view> -->
						</view>
						<view class="xiaohei text_b padding_left3 margin_top2" style="font-size: 22rpx;">領取截止日 {{http.returnDate(item.get_endtime*1000)}} 使用截至日{{http.returnDate(item.endtime*1000)}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="posibottom mainpadding" v-if="list.data.length">
			<view class="submitbtn" style="background-color: #ed4d2d;color: #fff;" @click="lingqu()">一鍵領取</view>
		</view>
		<view class="posibottom mainpadding" v-if="!list.data.length">
			<view class="submitbtn" style="background-color: #ed4d2d;color: #fff;" @click="jumpdetail('/pages_index/shopInfo?id=',shop_id)">離開</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsid: 0,
				tabList: [{
					name: "優惠券",
					id: 0,
				}, {
					name: "免運券",
					id: 1,
				}],
				list: {
					data: []
				},
				shop_id: "",
				shopInfo:{}
			}
		},
		onLoad(options) {
			this.shop_id = options.id
			this.getlist()
			this.getInfo()
		},
		methods: {
			getInfo() { //商家詳情
				let _this = this
				this.http.request('/api/shop/shop', 'POST', {
					shop_id: this.shop_id
				}).then(res => {
					if (res.code == 1) {
						let topimages_arr = []
						res.data.topimages.split(",").forEach(item => {
							topimages_arr.push(this.imgUrl + item)
						})
						this.$set(res.data, "topimages_arr", topimages_arr)
						this.shopInfo = res.data
						this.pageShow = true
					}
				})
			},
			lingqu() {
				let url = "/api/shop/addshop_rall"
				let arr = []
				this.list.data.forEach(item=>{
					arr.push(item.id)
				})
				if (this.tabsid==1) {
					url = "/api/shop/addshop_ship"
				}
				this.http.request(url, 'POST', {
					id:arr.join()
				}).then(res => {
					if (res.code == 1) {
						this.http.toast("領取成功")
						setTimeout(()=>{
							this.jumpdetail('/pages_index/shopInfo?id=',this.shop_id)
						},500)
						this.getlist()
					} else {
						this.http.toast(res.msg)
					}
				})
			},
			goShopInfo(id, value) { //店鋪詳情
				if (this.listtype == 1) { //選擇優惠券了
					if (Number(value.shop_rall.di_money) > Number(this.allprice)) {
						this.http.toast("優惠券须滿" + value.shop_rall.di_money + "可用")
						return false
					} else {
						let data = {
							yh_money: value.shop_rall.dk_money,
							rall_id: value.shop_rall.id
						}
						uni.$emit("selectyhq", data)
						uni.navigateBack(1)
					}
				} else {
					uni.setStorageSync("shop_id", id)
					uni.redirectTo({
						url: "/pages_index/shopInfo?id=" + id
					})
				}
			},
			tabchange(e) {
				this.tabsid = e.id
				this.getlist()
				this.list.data = []
			},
			getlist() {
				let _this = this
				let url = "/api/shop/shop_ralllist"
				let data = {
					shop_id: this.shop_id,
					type: 1
				}
				if (this.tabsid == 1) {
					url = "/api/shop/shop_shippinglist"
				}
				this.http.request(url, 'POST', data).then(res => {
					if (res.code == 1) {
						let arr = []
						res.data.forEach(item => {
							if (item.endtime * 1000 > Number(new Date()) && item.end_num !=0) {
								arr.push(item)
							}
						})
						this.list.data = arr
					} else if (res.code == 0) {
						this.http.toast(res.msg)
						this.list.data = []
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shadow {
		box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
	}
	.shopImgLogo {
		width: 164rpx;
		min-width: 164rpx;
		height: 164rpx;
		background: #D9D9D9;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
	.shopName {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
	}
	::v-deep.u-tabs__wrapper__nav__item {
		flex: 1;
		white-space: nowrap;
	}

	::v-deep.u-tabs {
		padding: 0 20rpx;
	}

	.shopImg {
		width: 44rpx;
		height: 44rpx;
		min-width: 44rpx;
		background: #D9D9D9;
		border-radius: 50%;
	}

	.couponBox {
		// width: 702rpx;
		height: 160rpx;
		// background-color: rgba(255, 232, 207, 1);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		box-sizing: border-box;
	}


	.line {
		width: 0;
		height: 52rpx;
		border-right: 1rpx solid #999999;
	}

	.use {
		width: 100rpx;
		height: 49rpx;
		text-align: center;
		line-height: 49rpx;
		background: #ed4d2d;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 1rpx solid #ed4d2d;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
	}
</style>